<template>
    <div class="main">
        <Header class="main_header"/>
        <div style="height: 63px;"></div>
        <div class="main_body">
            <div v-for="item in activityList" :key="item.id">
                <div class="main_body_for">
                    <a-card @click="viewActivity(item.id)" hoverable style="width: 260px;height: 400px;">
                        <template #cover>
                            <img :src="item.image" class="main_body_for_image" alt="图片"/>
                        </template>
                        <a-tooltip placement="bottom" :color="'#2db7f5'">
                            <a-card-meta>
                                <template #description>
                                    <h2 class="main_body_for_name">{{ item.name }}</h2>
                                    <p class="main_body_for_introduction">{{ item.introduction }}</p>
                                </template>
                            </a-card-meta>
                        </a-tooltip>
                    </a-card>
                </div>
            </div>
        </div>
        <Footer/>
    </div>
</template>

<script setup lang="ts">
import Header from '@/components/header/index.vue'
import Footer from '@/components/footer/index.vue'
import {getList} from "@/api/home/activity";
import {ref} from "vue";
import {useRouter} from "vue-router";

const router = useRouter()

//查看活动
const viewActivity = (id: number) => {
    router.push(`/activityDetails/${id}`)
}

//活动列表
const activityList = ref()

//获取活动列表
const handleList = () => {
    getList().then((res) => {
        activityList.value = res.data.data.list
    })
}

handleList()
</script>

<style lang="less" scoped>
.main {
  height: 100%;
  width: 100%;

  .main_header {
    height: 70px;
    position: fixed;
    width: 100%;
    z-index: 99999;
  }

  .main_body {
    margin-top: 20px;
    padding-left: 17%;
    padding-right: 15%;
    width: 100%;
    //网格布局
    display: grid;
    grid-template-columns: repeat(4, 28%);
    grid-template-rows: repeat(4, 15);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    justify-content: center;

    .main_body_for {
      width: 75%;
      margin-bottom: 40px;
      background-color: rgba(0, 0, 0, 0.1);

      :deep(.ant-card-meta-detail) {
        height: 138.833px;
      }

      :deep(.main_body_for_image) {
        width: 260px;
        height: 260px;
      }

      .main_body_for_name {
        padding-top: 5px;
      }

      .main_body_for_introduction {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }
}
</style>